<template>
  <div class="myheader">
    <div class="header-img">
      <img src="@/assets/img/logo.png" alt="" class="logo" />
      <span class="el-icon-s-fold" @click="TOGGLE_SIDEBAR"></span>
    </div>

    <div class="header-right">
      <span>{{ username }}({{ type == 1 ? "超级管理员" : "普通管理员" }})</span>
      <img src="@/assets/img/gita.gif" alt="" class="gita" />
      |
      <a href="#">退出登录</a>
      <img src="@/assets/img/cn.png" alt="" class="cn" />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
export default {
  name: "MyHeader",
  methods: {
    ...mapMutations(["TOGGLE_SIDEBAR"]),
    ...mapActions(["LogoutAction"]),
  },
  computed: {
    ...mapGetters(["username", "type"]),
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cn {
    height: 50px;
  }
  .logo {
    width: auto;
    height: 40px;
    margin-left: 10px;
  }
  .header-right {
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .gita {
    height: 36px;
    margin-left: 5px;
    margin-right: 5px;
  }
  a {
    margin-left: 5px;
  }
}
.header-img {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 26px;
    margin-left: 10px;
  }
  .logo {
    width: auto;
    height: 40px;
    margin-left: 10px;
  }
}
// .myheader {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;

//   .header-img {
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     span {
//       font-size: 26px;
//       margin-left: 10px;
//     }
//     .logo {
//       width: auto;
//       height: 40px;
//       margin-left: 10px;
//     }
//   }
//   .header-right {
//     display: flex;
//     justify-content: end;
//     align-items: center;
//     .cn {
//       height: 50px;
//     }
//     .gita {
//       height: 36px;
//       margin-left: 5px;
//       margin-right: 5px;
//     }
//     a {
//       margin-left: 5px;
//     }
//   }
// }
</style>